/**
 * Created by maiseries on 2018/1/10.
 */
import React from 'react';
import {
    StyleSheet,
    View,
} from 'react-native';

export default class DashLine extends React.Component {

    static propTypes = {
        style: React.PropTypes.number,
        dashStyle: React.PropTypes.number,
        dashWidth: React.PropTypes.number
    }

    static defaultProps = {
        dashWidth: layout.width(6)
    }

    render() {

        const total = Math.ceil(layout.MAX_WIDTH / this.props.dashWidth);

        let res = [];

        for (let i = 0; i < total; i++) {
            res.push(
                <View key={i} style={[styles.dash,this.props.dashStyle,{
                    width: this.props.dashWidth
                }]} />
            )
        }

        return (
            <View style={[base.rowCC, styles.container, this.props.style]}>
                {
                    res
                }
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        overflow: 'hidden'
    },
    dash: {
        marginHorizontal: layout.width(2),
        height: layout.height(6),
        backgroundColor: layout.MAIN_BORDER_COLOR_C1
    }
})